import React, { useState, useContext, createContext } from "react";

let myContext = createContext();

let otherContext = createContext();

function Parent() {
  return (
    <div>
      <h4>姓名：gqg</h4>
      <Child />
    </div>
  );
}

function Child() {
  const { age, setAge } = useContext(myContext);
  const { school, setSchool } = useContext(otherContext);
  console.log("----", useContext(myContext), useContext(otherContext));
  return (
    <div>
      <h4>年龄：{age}</h4>
      <h4>学校：{school}</h4>
      <button
        onClick={() => {
          setAge(age - 1);
        }}
      >
        减小一岁
      </button>
      <button
        onClick={() => {
          setAge(age + 1);
        }}
      >
        增加一岁
      </button>
      <button
        onClick={() => {
          setSchool('东桥小学');
        }}
      >
        东桥小学
      </button>
    </div>
  );
}

function Context() {
  const [age, setAge] = useState(18);
  const [school, setSchool] = useState("杨源小学");
  return (
    <myContext.Provider value={{ age: age, setAge: setAge }}>
      <otherContext.Provider value={{ school: school, setSchool: setSchool }}>
        <Parent />
      </otherContext.Provider>
    </myContext.Provider>
  );
}
export default Context;
